<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--vue的View部分。负责数据的呈现-->
		<div id="app-2">
			<span v-bind:title="message">
				鼠标放在此控件上。看看会显示啥
			</span>
		</div>
		
		<div id="app-3">
			<span v-bind:title="message">
				2222222222222鼠标放在此控件上。看看会显示啥
			</span>
		</div>
		
		<script type="text/javascript">
			// 相当于vue的Model,负责数据的组织
			// 对此Model的修改会影响到绑定此Model的控件
			var datas = {
				message: '页面加载于' + new Date().toLocaleString()
			};
				
			// 相当于vue的ViewModel,负责Model与View的绑定
			var app2 = new Vue({
				el: "#app-2",
				data: datas
			})
			
			// 对vue对象同一个控件的第二次数据绑定并不生效
			// 改变vue对象绑定的控件.则会重新进行绑定
			// 同时app2丢失对上一个控件绑定数据的控制
			app2 = new Vue({
				el: "#app-3",
				data: {
					message: "哈哈哈哈哈哈哈哈哈哈哈"
				}
			})
			
		</script>
	</body>
</html>